<template>
    <div>
        <header class="mui-bar mui-bar-nav">
            <!-- <router-link tag="span" to="/center" class="mui-icon mui-icon-bars"></router-link> -->
            <h1 class="mui-title" style="font-family: fantasy;">登录和注册</h1>
        </header>
        <div class="mui-content">
            <form class="mui-input-group">
                <div class="mui-input-row">
                    <label>用户名</label>
                    <input type="text" v-model="userName" class="mui-input-clear" placeholder="请输入手机号或者邮箱">
                </div>
                <div class="mui-input-row">
                    <label>密码</label>
                    <input type="password" v-model="passWord" class="mui-input-password" placeholder="请输入密码">
                </div>
                <div class="mui-input-row mui-checkbox  mui-left">
                    <label>记住密码</label>
                    <input name="remeber" id="remeber" type="checkbox">
                </div>
                <div class="mui-button-row">
                    <button type="button" class="mui-btn mui-btn-primary" @click="login(1)">注册</button>
                    <button type="button" class="mui-btn mui-btn-danger" @click="login(2)">登录</button>
                </div>
            </form>
        </div>



    </div>
</template>

<script>
    export default {
        data() {
            return {
                userName: '',
                passWord: ''
            }
        },
        methods: {
           login(type){
                if(!this.userName || !this.passWord){
                    this.mui.toast('用户名和密码不能为空',{ duration:'long', type:'div' }) 
                }else{
                    if(this.checkUserName(this.userName) && this.checkPassWord(this.passWord)){
                        if(type == 1){
                            this.mui.toast('注册并成功',{ duration:'long', type:'div' }) 
                        }else{
                            this.mui.toast('登录成功',{ duration:'long', type:'div' }) 
                        }
                        var check = document.getElementById('remeber');
                        if(check.checked == true){
                            this.common.setCookie('userName',this.userName);
                            this.common.setCookie('passWord',this.passWord);
                        }
                        sessionStorage.setItem('userId',this.userName);                       
                        this.$router.push('/home');
                    }
                }
           },
           checkUserName:function(str){
                var myreg = /^1\d{10}$/;
                var myemail = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
                var result1 = myreg.test(str);
                var result2 = myemail.test(str);
                if(result1 || result2){                   
                    return true;
                }else{
                    this.mui.toast('请输入有效的手机号或邮箱',{ duration:'long', type:'div' }) 
                    return false;
                }   
           },
           checkPassWord:function(str){
                if(str.length != 6){
                    this.mui.toast('请出入六位有效密码',{ duration:'long', type:'div' }) 
                    return false;
                }else{
                    return true;
                }
           }
        },
        created: function () {
           var _userName = this.common.getCookie('userName');
           var _passWord = this.common.getCookie('passWord');
           if(_userName &&　_passWord){
                this.userName = _userName;
                this.passWord = _passWord;
           }
        },        
    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    html {
        touch-action: none;
    }
    header {
        background-color: #51a2e2;
        color: #fff;
    }

    .content {
        background: #fff;
    }

    h1 {
        color: #fff;
    }
    button{
        width: 120px;
    }
</style>